<div class="container">

    <div class="card">
        <div class="card-header">图片管理</div>
        <div class="card-body">
            <div class="form-inline" role="search">
                <div class="form-group">
                    <select id="class1" class="form-control class1" style="color: #000000"
                            onchange="IMAGE.classChange(this)">
                        <option>选择分类</option>
                        #for(x : class1)
                        <option value="#(x.id)">#(x.name)</option>
                        #end
                    </select>
                </div>
                <div class="form-group">
                    <select id="class2" class="form-control class2" name="class"
                            style="color: #000000; min-width: 121px;">
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
        #@paginate(page.pageNumber, page.totalPage, "/admin/images/")
        <!--        <table class="table table-hover table-condensed">-->
        <!--            <tbody>-->
        <!--            <tr>-->
        <!--                <th>id</th>-->
        <!--                <th>分类</th>-->
        <!--                <th>download</th>-->
        <!--                <th>like</th>-->
        <!--                <th>width</th>-->
        <!--                <th>height</th>-->
        <!--                <th>img</th>-->
        <!--                <th>操作</th>-->
        <!--            </tr>-->
        <!--            #for(x : page.getList())-->
        <!--            <tr>-->
        <!--                <td>#(x.id)</td>-->
        <!--                <td>#(x.cname)</td>-->
        <!--                <td>#(x.download)</td>-->
        <!--                <td>#(x.like)</td>-->
        <!--                <td>#(x.width)</td>-->
        <!--                <td>#(x.height)</td>-->
        <!--                <td><img src="#(x.url)" class="img-responsive img-thumbnail" width="200"/></td>-->
        <!--                <td>-->
        <!--                    &nbsp;&nbsp;<button onclick="IMAGE.delete(#(x.id))" class="btn btn-danger">删除</button>-->
        <!--                    &nbsp;&nbsp;<button data-toggle="modal" data-target="update-modal" data-id="#(x.id)"-->
        <!--                                        data-url="#(x.url)" onclick="IMAGE.changeAction(this)" class="btn btn-primary">-->
        <!--                    修改-->
        <!--                </button>-->
        <!--                </td>-->
        <!--            </tr>-->
        <!--            #end-->
        <!--            </tbody>-->
        <!--        </table>-->
        <div class="row row-cols-2 row-cols-md-5">
                #for(x : page.getList())
                <div class="card col mb-4">
                    <img src="#(x.url)" class="card-img-top  img-thumbnail img-circle" alt="...">
                    <div class="card-img-overlay bg-light " style="opacity: 0.65;">
                        <p>#(x.cname)</p>
                        <p>#(x.width) * #(x.height)</p>
                        &nbsp;&nbsp;<button onclick="IMAGE.delete(#(x.id))" class="btn btn-danger">删除</button>
                        &nbsp;&nbsp;<button data-toggle="modal" data-target="update-modal" data-id="#(x.id)"
                                            data-url="#(x.url)" onclick="IMAGE.changeAction(this)"
                                            class="btn btn-primary">
                        修改
                    </button>
                    </div>
                </div>
                #end
        </div>

    </div>


</div>


<div class="modal fade" tabindex="-1" role="dialog" id="update-modal" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFFFFF"><span
                        aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="" width="200" class="img-responsive img-thumbnail"/> <br>
                <div class=" form">
                    <div class="form-group">
                        <select id="class1-1" class="form-control class1" style="color: #000000"
                                onchange="IMAGE.classChange(this,true)">
                            <option>选择分类</option>
                            #for(x : class1)
                            <option value="#(x.id)">#(x.name)</option>
                            #end
                        </select>
                    </div>
                    <div class="form-group">
                        <select id="class2-1" class="form-control class2" name="class"
                                style="color: #000000; min-width: 121px">
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="update-modal-change"
                        onclick="IMAGE.change()">确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>

    const IMAGE = {
        classChange: function (dom, bool) {
            console.log(dom.value)
            if (dom.value > 0) {
                $.get("/class/list2/" + dom.value, function (res) {
                    if (res.state === 'ok') {
                        $('#class2').empty();
                        $('#class2-1').empty();
                        res.data.forEach(function (item) {
                            if (bool) {
                                $('#class2-1').append(`<option value='${item.id}'>${item.name}</option>`)
                            } else {
                                $('#class2').append(`<option value='${item.id}'>${item.name}</option>`)
                            }

                        })
                    }

                })
            }

        },
        delete: function deleteClass(id) {
            let b = window.confirm("确定删除?");
            if (b) {
                window.location.href = "/image/delete/" + id;
            }
        },
        changeAction: function (dom) {
            let data = $(dom).data();
            $("#update-modal").find('img').attr("src", data.url);
            $("#update-modal-change").data("id", data.id);
            $("#update-modal").modal('show')
        },
        change: function () {
            let id = $("#update-modal-change").data().id;
            let classId = $("#class2-1").val();
            if (!classId) {
                spop({
                    template: '请选择分类后，在提交',
                    style: 'warning',
                    autoclose: 2000,
                    position: 'top-center'
                });
                return
            }
            $.post("/image/update", JSON.stringify({"class_id": classId, "id": id}), function (res) {
                console.log({res})
                if (res.state === 'ok') {
                    window.location.reload();
                }
            });
        }
    }

</script>